﻿<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/competition-common :: common_head(~{::link},~{::script})">
    <meta charset="utf-8">
    <link href="/styles/mall/index.css" rel="stylesheet">
    <script src="/javascript/mall/index.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>
<body>
<div th:replace="common/competition-common::mall-header"></div>
<div th:replace="common/competition-common::competition-sidebar"></div>
<div class="mall-body" style="margin-right: 50px">
    <div class="carousel slide home-banner" id="homeBanner">
        <form id="competitionForm" action="/competition/insertCompetition" enctype="multipart/form-data" method="post">
            <div class="align-center ">
                <div class="mb-3 row">
                    <label class="col-sm-2 col-form-label" for="eventName">
                        <i class="bi bi-award-fill"></i>赛事名称</label>
                    <div class="col-sm-5">
                        <input class="form-control" id="eventName" name="comname" required>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-sm-2 col-form-label" for="eventInfo">
                        <i class="bi bi-clipboard2"></i>赛事简介</label>
                    <div class="col-sm-5">
                        <input class="form-control" id="eventInfo" name="comprofile" required>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-sm-2 col-form-label" for="competitionPurpose"><i class="bi bi-bookmark-fill"></i>赛事宗旨</label>
                    <div class="col-sm-5">
                        <input class="form-control" id="competitionPurpose" name="compurpose" type="text" required>
                    </div>
                </div>
                <div class="mb-3">
                    <label class="col-sm-2 col-form-label" for="upload"><i class="bi bi-filetype-jpg"></i>赛事海报</label>
                    <div id="fileUpload">
                        <input accept="image/*" id="upload" name="fileUpload" type="file" required/>
                        <canvas class="hidden" id="canvas"></canvas>
                        <div class="preview" id="preview"></div>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-sm-2 col-form-label" for="upload1"><i class="bi bi-filetype-jpg"></i>赛事标识</label>
                    <div id="fileUpload1">
                        <input accept="image/*" id="upload1" name="fileUpload1" type="file" required/>
                        <canvas class="hidden" id="canvas1"></canvas>
                        <div class="preview" id="preview1"></div>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-sm-2 col-form-label" for="sponsor">
                        <i class="bi bi-incognito"></i>赞助商</label>
                    <div class="col-sm-5">
                        <input class="form-control" id="sponsor" name="sponsor" type="text" required>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-sm-2 col-form-label" for="otherDescription">其他说明</label>
                    <div class="col-sm-5">
                        <input class="form-control" id="otherDescription" name="comother" type="text" required>
                    </div>
                </div>
            </div>
            <button class="btn btn-secondary" data-bs-dismiss="modal" type="button">
                <i class="bi bi-slash-circle"></i>取消</button>
            <button class="btn btn-success" type="submit">
                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                <i class="bi bi-check-circle-fill"></i>
                提交</button>
        </form>
    </div>
</div>
</body>
</html>

<script>
    document.getElementById('upload').addEventListener('change', function (event) {
        const file = event.target.files[0]
        if (file && file.type.startsWith('image/')) {
            const reader = new FileReader()
            reader.onload = function (e) {
                const img = new Image()
                img.onload = function () {
                    const canvas = document.getElementById('canvas')
                    const ctx = canvas.getContext('2d')

                    const MAX_WIDTH = 1300 // 固定宽度
                    const MAX_HEIGHT = 500 // 固定高度

                    canvas.width = MAX_WIDTH
                    canvas.height = MAX_HEIGHT

                    ctx.clearRect(0, 0, canvas.width, canvas.height)

                    const scale = Math.max(MAX_WIDTH / img.width, MAX_HEIGHT / img.height)
                    const width = MAX_WIDTH / scale
                    const height = MAX_HEIGHT / scale
                    const x = (img.width - width) / 2
                    const y = (img.height - height) / 2

                    ctx.drawImage(img, x, y, width, height, 0, 0, MAX_WIDTH, MAX_HEIGHT)

                    const resizedImage = canvas.toDataURL('image/jpeg')

                    const preview = document.getElementById('preview')
                    preview.innerHTML = '<img src="' + resizedImage + '" alt="Resized Image">'
                }
                img.src = e.target.result
            }
            reader.readAsDataURL(file)
        } else {
            alert('请上传有效的图片文件。')
        }
    })

    document.getElementById('fileUpload1').addEventListener('change', function (event) {
        const file = event.target.files[0]
        if (file && file.type.startsWith('image/')) {
            const reader = new FileReader()
            reader.onload = function (e) {
                const img = new Image()
                img.onload = function () {
                    const canvas = document.getElementById('canvas1')
                    const ctx = canvas.getContext('2d')

                    const MAX_WIDTH = 200 // 固定宽度
                    const MAX_HEIGHT = 200 // 固定高度

                    canvas.width = MAX_WIDTH
                    canvas.height = MAX_HEIGHT

                    ctx.clearRect(0, 0, canvas.width, canvas.height)

                    const scale = Math.max(MAX_WIDTH / img.width, MAX_HEIGHT / img.height)
                    const width = MAX_WIDTH / scale
                    const height = MAX_HEIGHT / scale
                    const x = (img.width - width) / 2
                    const y = (img.height - height) / 2

                    ctx.drawImage(img, x, y, width, height, 0, 0, MAX_WIDTH, MAX_HEIGHT)

                    const resizedImage = canvas.toDataURL('image/jpeg')

                    const preview = document.getElementById('preview1')
                    preview.innerHTML = '<img src="' + resizedImage + '" alt="Resized Image">'
                }
                img.src = e.target.result
            }
            reader.readAsDataURL(file)
        } else {
            alert('请上传有效的图片文件。')
        }
    })

    document.getElementById('competitionForm').addEventListener('submit', function (event) {
        const requiredFields = document.querySelectorAll('#competitionForm [required]')
        for (let field of requiredFields) {
            if (!field.value.trim()) {
                alert('请输入完整内容。')
                event.preventDefault()
                return
            }
        }
    })
</script>

<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f0f0f0;
        font-family: Arial, sans-serif;
    }

    .container {
        text-align: center;
        background: white;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    input[type='file'] {
        margin-bottom: 20px;
    }

    .preview {
        margin-top: 20px;
    }

    .hidden {
        display: none;
    }
</style>
